'use client'

import { useRef } from 'react'
import { motion, useScroll, useTransform } from 'framer-motion'
import Image from 'next/image'

export default function KeyboardAnimation() {
  const containerRef = useRef(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ["start end", "end start"]
  })

  // 为不同层创建不同的动画值
  const layer1Y = useTransform(scrollYProgress, [0, 1], [100, 0])
  const layer2Y = useTransform(scrollYProgress, [0, 1], [50, 0])
  const layer3Y = useTransform(scrollYProgress, [0, 1], [0, 0])
  
  const layer1Scale = useTransform(scrollYProgress, [0, 1], [0.5, 1])
  const layer2Scale = useTransform(scrollYProgress, [0, 1], [0.6, 1])
  const layer3Scale = useTransform(scrollYProgress, [0, 1], [0.7, 1])

  return (
    <section 
      ref={containerRef}
      className="min-h-[200vh] relative bg-black"
    >
      <div className="sticky top-0 h-screen flex items-center justify-center overflow-hidden">
        <div className="relative w-full max-w-7xl mx-auto h-[80vh]">
          {/* 底层 - PCB */}
          <motion.div
            style={{ 
              y: layer3Y,
              scale: layer3Scale,
            }}
            className="absolute inset-0 flex items-center justify-center"
          >
            <Image
              src="https://images.unsplash.com/photo-1587829741301-dc798b83add3"
              alt="Keyboard PCB"
              width={800}
              height={400}
              className="object-contain"
            />
          </motion.div>

          {/* 中层 - 轴体 */}
          <motion.div
            style={{ 
              y: layer2Y,
              scale: layer2Scale,
            }}
            className="absolute inset-0 flex items-center justify-center"
          >
            <Image
              src="https://images.unsplash.com/photo-1595044426077-d36d9236d54a"
              alt="Keyboard Switches"
              width={800}
              height={400}
              className="object-contain"
            />
          </motion.div>

          {/* 顶层 - 键帽 */}
          <motion.div
            style={{ 
              y: layer1Y,
              scale: layer1Scale,
            }}
            className="absolute inset-0 flex items-center justify-center"
          >
            <Image
              src="https://images.unsplash.com/photo-1601445638532-3c6f6c3aa1d6"
              alt="Keyboard Keycaps"
              width={800}
              height={400}
              className="object-contain"
            />
          </motion.div>

          {/* 文字说明 */}
          <motion.div
            style={{ 
              opacity: useTransform(scrollYProgress, [0, 0.2], [0, 1]),
              y: useTransform(scrollYProgress, [0, 1], [50, 0])
            }}
            className="absolute left-10 top-1/4 text-white max-w-md"
          >
            <h2 className="text-5xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-500">
              Crafted to Perfection
            </h2>
            <p className="text-xl text-gray-300 leading-relaxed">
              Every layer of our keyboards is meticulously designed and assembled to create the perfect typing experience.
            </p>
          </motion.div>
        </div>
      </div>
    </section>
  )
} 